<!-- 学社 - 考试 - 选择考试 -->
<template>
  <view class="pb-20">
    <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData">
      <template #top>
        <z-navbar title="选择考试" :border-bottom="true"></z-navbar>
        <u-tabs bg-color="none" name="category_name" :list="state.categoryList" bar-height="6"
          bar-width="44" active-color="#333" inactive-color="#999" font-size="32" :bar-style="barStyle"
          v-model="state.current" @change="onTabChange"></u-tabs>
      </template>
      <view v-for="(item, index) in state.list" :key="index" class="p-4 item" @click="onItemClick(item)">
        <u-checkbox :modelValue="item.selected" shape="circle" active-color="#F4AF22" />
        <u-image class="mr-2" width="92" height="92" border-radius="12" src="/package_society/static/images/img_cover_exam.png"></u-image>
        <view class="flex-1 flex items-center h-92 text-single">
          <view class="c-#333 text-28 font-bold text-single">{{ item.paper_name }}</view>
        </view>
      </view>
      <template #bottom>
        <view class="h-150 bg-white">
          <u-line class="w-full" color="#eee" :hair-line="false" />
          <view class="btn-submit" @click="onSubmit">下一步</view>
        </view>
      </template>
    </z-paging-list>
  </view>
</template>

<script setup>
// import { navigate } from "@/common/util/uni";
import { refreshPrePage } from '@/common/util/util'
import { getExamCategory, getExamLists } from '@/common/http/module/society.js'

const list = ref();
const state = reactive({
  current: 0,
  club_id: '', // 学社id
  categoryList: [], // 课程分类
  list: [], // 课程列表
  category_id: '', // 分类id
})

const barStyle = {
  // color
  backgroundColor: '#F4AF22'
}

// tab切换
function onTabChange (i) {
  state.category_id = state.categoryList[i].id
  refresh()
}

function onItemClick (val) {
  // val.selected = !val.selected
  state.list.forEach(v => {
    if (v.id == val.id) {
      v.selected = true
    } else {
      v.selected = false
    }
  })
}

// 添加
function onSubmit () {
  const selectedItem = state.list.find((item) => item.selected);
  const data = {
    ...selectedItem,
    category: state.categoryList[state.current]?.name
  }
  refreshPrePage('onAcceptExam', data)
  setTimeout(() => {
    uni.navigateBack()
  }, 600);
}

function refresh() {
  list.value.onRefresh()
}

async function loadCategory () {
  const { data } = await getExamCategory()
  state.categoryList = data
  refresh()
}

function loadData (page) {
  const category_id = state.category_id ? state.category_id : state.categoryList && state.categoryList[0].id
  getExamLists(category_id, page).then(res => {
    list.value.onLoadResult(page ? res.data : []);
  })
}

onLoad(options => {
  state.club_id = options.club_id
  loadCategory()
  loadData
})
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #F6F6F6;
}
</style>

